<template>
  <div id="cart">
    <!-- 导航栏 -->
    <van-nav-bar title="购物车" fixed />

    <!-- 空状态 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车暂无商品"
    >
      <van-button round type="danger" to="index" class="bottom-button">去挑选</van-button>
    </van-empty>

    <!-- 提交订单 -->
    <van-submit-bar :price="3050" button-text="提交订单"  />

    <!-- 底部导航栏 -->
    <van-tabbar
    v-model="active"
    fixed
    active-color="#f73a3a"
    inactive-color="#000"
  >
    <van-tabbar-item name="index" to="/index" icon="home-o"
      >首页</van-tabbar-item
    >
    <van-tabbar-item name="circle" to="/circle" icon="apps-o"
      >分类</van-tabbar-item
    >
    <van-tabbar-item name="cart" to="/cart" icon="shopping-cart-o"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item name="mine" to="/mine" icon="contact"
      >我的</van-tabbar-item
    >
  </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "cart",
    };
  },
};
</script>

<style lang="scss">
#cart {
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .van-empty{
    padding: 150px 0 0 0;
  }
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
  .van-submit-bar {
    position: fixed;
    left: 0;
    bottom: 50px;
  }
}
</style>